<template>
  <div>
    <el-dialog v-model="state.showPreviewDialog" title="预览效果" width="80%">
      <form-render :form-JSON="designer"></form-render>
      <template #footer>
        <div class="dialog-footer text-center">
          <el-button type="primary" @click="getFormJSON">获取数据</el-button>
          <el-button type="primary" @click="resetFormData">重置表单</el-button>
          <el-button type="primary" @click="state.showPreviewDialog = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
    <div v-if="state.showCodeDialog">
      <show-code-dialog
        :title="state.title"
        v-model:showCodeDialog="state.showCodeDialog"
        v-model:code="state.JSON"
      ></show-code-dialog>
    </div>
  </div>
</template>
<script setup>
import { computed, reactive } from 'vue'
import ShowCodeDialog from './showCodeDialog.vue'
import FormRender from '@/components/form-render/index.vue'
const props = defineProps({
  showPreviewDialog: {
    type: Boolean,
    default: false,
  },
  designer: {
    type: Object,
    default: () => {},
  },
})
const emits = defineEmits(['update:showPreviewDialog'])
const state = reactive({
  showPreviewDialog: computed({
    get() {
      return props.showPreviewDialog
    },
    set(v) {
      emits('update:showPreviewDialog', v)
    },
  }),
  JSON: '',
  showCodeDialog: false,
  title: '',
})
const getFormJSON = () => {
  state.title = '获取数据'
  state.JSON = props.designer.getJSON()
  state.showCodeDialog = true
}
const resetFormData = () => {
  props.designer.resetData()
}
</script>
